<template>
  <div class="faq-page">
    <h1 class="faq-title" style="font-size: 48px">御兽阁购买方式</h1>
    <h1>欢迎使用我们的宠物商城！以下是四种常见的购买方式，供您选择和了解：</h1>
    <div class="faq-container">
      <ul class="faq-list">
        <li v-for="item in faqItems" :key="item.id" class="faq-item">
          <h2>{{ item.question }}</h2>
          <p>{{ item.answer }}</p>
          <p>{{ item.answer1 }}</p>
          <p>{{ item.answer2 }}</p>
          <p>{{ item.answer3 }}</p>
          <p>{{ item.answer4 }}</p>
          <p>{{ item.answer5 }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      faqItems: [
        {
          id: 1,
          question: '1. 余额支付（Balance Payment）：',
          answer: '1.如果您已经创建了现金账户并有足够的余额，可以选择使用余额支付购买商品。',
          answer1: '2.在结算页面，选择 "余额支付" 选项，并确认支付金额。',
          answer2: '3.点击 "确认支付" 完成交易。款项将从您的现金账户扣除。',
        },
        {
          id: 2,
          question: '2. 网上方式（Online Payment）：',
          answer: '1.我们支持各种网上支付方式，如支付宝、微信支付、信用卡等。',
          answer1: '2.在结算页面，选择适合您的网上支付方式，并按照页面指引完成支付。',
          answer2: '3.提供必要的支付信息，例如银行卡号、密码等。',
          answer3: '4.确认支付后，请等待支付结果确认，以确保订单顺利完成。',
        },
        {
          id: 3,
          question: '3. 银行方式（Bank Transfer）：',
          answer: '1.如果您希望通过银行转账进行支付，可以选择银行方式。',
          answer1: '2.在结算页面，选择 "银行方式" 或类似选项。',
          answer2: '3.查看支付页面上提供的银行账户信息，包括收款人姓名、账号等。',
          answer3: '4.使用您的网上银行或前往银行柜台，将订单金额转账至提供的银行账户。',
          answer4: '5.请务必在转账时提供正确的订单号或备注信息，以便我们确认支付并及时处理您的订单。',
        },
        {
          id: 4,
          question: '4. 货到付款（Cash on Delivery）：',
          answer: '1.如果您更倾向于在收到商品时再付款，可以选择货到付款方式。',
          answer1: '2.在结算页面，选择 "货到付款" 或类似选项。',
          answer2: '3.提供正确的收货地址和联系人信息，确保顺利配送。',
          answer3: '4.在快递员送达时，请准备好现金支付订单金额，并与快递员完成交易。',
        },
        {
          id: 5,
          question: '请注意，可用的购买方式可能会根据地区和商品而有所不同。在结算过程中，请确保提供准确的信息和完成支付步骤。如有任何疑问或需要进一步的帮助，请随时联系我们的客服团队。',
        },
      ],
    };
  },
};
</script>

<style scoped>
.faq-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.faq-title {
  font-size: 24px;
  text-align: center;
}

.faq-container {
  margin-top: 20px;
  padding: 20px;
  background-color: #f5f5f5;
}

.faq-list {
  list-style: none;
  padding: 0;
}

.faq-item {
  margin-bottom: 20px;
}

h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

p {
  margin: 0;
  color: #333;
}
</style>


